<!--
 * @Description:
 * @Author: Pengfei Zhang
 * @Date: 2021-09-02 10:00:11
 * @LastEditors: Pengfei Zhang
 * @LastEditTime: 2021-09-10 15:27:16
-->
<template>
  <view class="page page-content">
    <SearchBar class="page-header"/>
    <CommonTab value="1" :list="tabList" />
    <ScrollList :list="taskList" :total="total" class="list-wrapper" @scrolltolower="scrollLoad">
      <view class="task-list">
        <view v-for="(item,index) in taskList" :key="index" class="task-item" @click="linkTo(item)">
          <view class="task-top">
            <view class="task-type">
              {{item.taskType}}
            </view>
            <TaskStatusBar :state="item.status"/>
          </view>
          <view class="task-title">
            <text class="task-role">【{{item.taskRole}}】</text>
            <text class="task-name">{{item.taskName}}</text>
          </view>
          <view class="task-event">
            <view class="event-type">{{item.eventType}}</view>
            <text class="event-name">{{item.eventName}}</text>
          </view>
          <view class="task-date-wrapper">
            <view class="task-date">
              <text class="date-tag">开始时间:</text>
              <text class="date">{{item.startTime}}</text>
            </view>
            <view class="divider"></view>
            <view class="task-date">
              <text class="date-tag">期望完成:</text>
              <text class="date">{{item.expectedTime}}</text>
            </view>
          </view>
        </view>
      </view>
    </ScrollList>
  </view>
</template>

<script>
import SearchBar from '@/components/searchBar';
import ScrollList from '@/components/scrollList';
import CommonTab from '@/components/commonTab';
import TaskStatusBar from '@/components/taskStatusBar';

export default {
  components: {
    SearchBar,
    ScrollList,
    CommonTab,
    TaskStatusBar,
  },
  data() {
    return {
      searchParams: {
        pageNum: 1,
        paegSize: 10,
      },
      total: 1,
      taskList: [
        {
          id:1,
          taskType:'普通任务',
          status:1,
          taskRole:'负责',
          taskName:'核查环城路附近发生洪涝灾害的街道',
          eventType: '洪涝',
          eventName:'0523广州市广谱区环城路洪涝灾害',
          startTime:'2021年12月12日 12:12:12',
          expectedTime:'2021年12月30日 12:12:12',
        },{
          id:1,
          taskType:'普通任务',
          status:2,
          taskRole:'负责',
          taskName:'核查环城路附近发生洪涝灾害的街道',
          eventType: '洪涝',
          eventName:'0523广州市广谱区环城路洪涝灾害',
          startTime:'2021年12月12日 12:12:12',
          expectedTime:'2021年12月30日 12:12:12',
        },{
          id:1,
          taskType:'普通任务',
          status:3,
          taskRole:'负责',
          taskName:'核查环城路附近发生洪涝灾害的街道',
          eventType: '洪涝',
          eventName:'0523广州市广谱区环城路洪涝灾害',
          startTime:'2021年12月12日 12:12:12',
          expectedTime:'2021年12月30日 12:12:12',
        },{
          id:1,
          taskType:'普通任务',
          status:4,
          taskRole:'负责',
          taskName:'核查环城路附近发生洪涝灾害的街道',
          eventType: '洪涝',
          eventName:'0523广州市广谱区环城路洪涝灾害',
          startTime:'2021年12月12日 12:12:12',
          expectedTime:'2021年12月30日 12:12:12',
        },{
          id:1,
          taskType:'普通任务',
          status:5,
          taskRole:'负责',
          taskName:'核查环城路附近发生洪涝灾害的街道',
          eventType: '洪涝',
          eventName:'0523广州市广谱区环城路洪涝灾害',
          startTime:'2021年12月12日 12:12:12',
          expectedTime:'2021年12月30日 12:12:12',
        },
      ],
      tabList: [
        { label: '全部', value: 1 },
        { label: '待执行', value: 2 },
        { label: '执行中', value: 3 },
        { label: '疑问反馈', value: 4 },
        { label: '已取消', value: 5 },
      ]
    };
  },
  onLoad(options) {

  },
  methods: {
    scrollLoad() {
      if (this.taskList.length < this.total) {
        this.getList();
      }
    },
    getList() {
      // this.taskList({
      //   taskLevel: 1,
      //   taskName: '核查环城路附近发生洪涝灾害核查环城路附近发生洪涝灾害',
      //   taskType: '洪涝',
      //   createTime: '2021-12-12  12:20:12',
      //   status: '2',
      //   task: 4,
      // })
    },
    linkTo(row) {
      console.log(row)
      uni.navigateTo({
        url: '/pages/task-detail/index?id=' + row.id,
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
}
.list-wrapper {
  flex: 1;
  overflow-y: auto;
}
.task-list {
  padding: 40rpx 32rpx;
  .task-item {
    border-radius: 16rpx;
    background: #fff;
    box-shadow: 0px 5rpx 15rpx rgba(44, 121, 247, 0.2);
    margin-bottom: 32rpx;
    padding: 0 30rpx 30rpx 30rpx;
    display:flex;
    flex-direction: column;
    justify-content:space-between;
    height:272rpx;
    &:last-child {
      margin-bottom: 0;
    }

    .task-top{
      display:flex;
      align-items: center;
      justify-content: space-between;

      .task-type{
        display:flex;
        align-items: center;
        justify-content:center;
        height:40rpx;
        width:120rpx;
        background-color:#027AFF;
        font-family: "Source Han Sans CN Normal";
        font-weight: normal;
        font-size: 24rpx;
        color: #fff;
        border-radius: 0 0 20rpx 20rpx;
      }
    }

    .task-title{
      display:flex;
      align-items: center;
      font-family: "Source Han Sans CN Medium";

      .task-role{
        font-weight: normal;
        font-size: 29rpx;
        color: #027aff;
      }

      .task-name{
        font-weight: 500;
        font-size: 30rpx;
        color: #2b2b2b;
        width:512rpx;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
    }

    .task-event{
      display:flex;

      .event-type{
        width: 80rpx;
        height: 32rpx;
        border-radius: 16rpx;
        background: rgba(50, 148, 255, 0.2);
        border: 1rpx solid #027aff;
        margin-right:8rpx;
        font-family: "Source Han Sans CN";
        text-align:center;
        font-weight: normal;
        font-size: 22rpx;
        color: #027aff;
      }

      .event-name{
        font-family: "Source Han Sans CN";
        font-weight: normal;
        font-size: 28rpx;
        text-align: left;
        color: #2b2b2b;
        opacity: 0.8;
      }
    }

    .task-date-wrapper{
      display:flex;
      justify-content:space-between;

      .task-date{
        display:flex;
        flex-direction: column;
        font-family: "Source Han Sans CN Normal";
        width:300px;

        .date-tag{
          font-weight: normal;
          font-size: 24rpx;
          color: #2b2b2b;
          opacity: 0.5;
        }

        .date{
          font-weight: normal;
          font-size: 24rpx;
          text-align: left;
          color: #2b2b2b;
        }
      }
    }

    .divider{
      width: 0;
      height: 73rpx;
      background: transparent;
      border: 1rpx solid #707070;
      opacity: 0.3;
      margin:0 20rpx 0 10rpx;
    }
  }
}
</style>